<div class="uk-layui-form">
    <form class="layui-form uk-form" action="/admin/callcenter/router/save.html" data-toggle="ajax-form" data-inner="#callCenterContent" data-message="false">
    	<input type="hidden" name="hostid" value="${pbxHost.id!''}">
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px;">名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入路由规则名称" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
            	<font color="red">*</font> 
            	路由规则名称
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px;">类型：</label>
            <div class="layui-input-inline">
            	<select name="type">
            		<option>请选择类型</option>
            		<option value="default">基本规则</option>
            		<option value="ivr">语音IVR</option>
            		<option value="callcenter">队列</option>
            		<option value="smart">智能IVR</option>
            		<option value="in">呼入</option>
            		<option value="out">呼出</option>
            	</select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px;">序号：</label>
            <div class="layui-input-inline">
            	<select name="routerinx">
            		<#list 1..100 as inx>
            		<option value="${inx}">${inx}</option>
            		</#list>
            	</select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px;">工作时间设置：</label>
            <div class="layui-input-inline">
            	<input type="checkbox" name="enableworktime" lay-skin="switch" value="1" lay-filter="worktime" lay-text="是|否">
            </div>
            <div class="layui-inline noworkdefault" style="display: none;">
            	<label class="layui-form-label" style="width: 120px;">非工作时间默认：</label>
	            <div class="layui-input-inline" style="width: 110px;margin-right: 0;margin-left: 0;" >
					<select name="nowork" lay-filter="routernowork" >
		      			<option value="hangup">挂断</option>
		      			<option value="trans" selected="selected">转接(号码)</option>
		      			<option value="voice">语音播报</option>
					</select>
				</div>
				<div class="layui-input-inline noworkdefaultnum" style="width: 100px;margin-right: 0;" >
					<input type="text" name="noworknum"  placeholder="转接号码" autocomplete="off" class="layui-input">
				</div>
				<div class="layui-input-inline noworkdefaultmedia" style="width: 100px;margin-right: 0;display: none;">
					<select name="noworkvoice">
						<option value="" >语音播报</option>
		      			<#if mediaList?? && mediaList?size gt 0>
						<#list mediaList as media>
						<option value="${media.id!''}" >${media.name!''}</option>
						</#list>
						</#if>
					</select>
				</div>
            </div>
        </div>
        <div class="layui-form-item worktime" style="display: none;">
            <label class="layui-form-label" style="width: 120px;">时间设置：</label>
            <div class="layui-inline">
				<div class="layui-input-inline" id="worktimeadd" style="margin-right:0;">
					<button class="layui-btn layui-btn-primary"  type="button" ><i class="layui-icon">&#xe608;</i>添加时间段</button>
				</div>
			</div>
			<div id="worktimeitem" style="margin: 0 0 0 139px;">
        	</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 120px;">启用呼叫转移：</label>
            <div class="layui-input-inline">
            	<input type="checkbox" name="enablecalltrans" lay-skin="switch" value="1" lay-filter="enablecalltrans" lay-text="是|否">
            </div>
        </div>
        <div class="layui-form-item enablecalltrans" style="display: none;">
            <label class="layui-form-label" style="width: 120px;">坐席忙转号码：</label>
            <div class="layui-input-inline">
            	<input type="text" name="busyext" placeholder="坐席忙转号码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item enablecalltrans" style="display: none;">
            <label class="layui-form-label" style="width: 148px;">启用坐席离线转手机：</label>
            <div class="layui-input-inline">
            	<input type="checkbox" name="enablecallagent" lay-skin="switch" value="1"  lay-text="是|否">
            </div>
        </div>
        <div class="layui-form-item enablecalltrans" style="display: none;">
            <label class="layui-form-label" style="width: 190px;">无坐席在线的时候转入号码：</label>
            <div class="layui-input-inline">
            	<input type="text" name="notready" placeholder="无坐席在线的时候转入号码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-button">
            <div class="layui-button-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script>
var form ;
//Demo
layui.use('form', function(){
  var $ = layui.$
  form = layui.form;
  form.render();
  form.on("select(worktype)" , function(data){
		if(data.value == 'work'){
			$(data.elem).closest(".worktimeitem").find(".nowork").hide();	
			$(data.elem).closest(".worktimeitem").find(".noworknum").hide();	
			$(data.elem).closest(".worktimeitem").find(".noworkmedia").hide();
		}else{
			$(data.elem).closest(".worktimeitem").find(".nowork").show();	
		}
	});
  form.on("select(noworkaction)" , function(data){
		if(data.value == 'trans'){
			$(data.elem).closest(".worktimeitem").find(".noworknum").show();	
			$(data.elem).closest(".worktimeitem").find(".noworkmedia").hide();
		}else if(data.value == 'voice'){
			$(data.elem).closest(".worktimeitem").find(".noworkmedia").show();	
			$(data.elem).closest(".worktimeitem").find(".noworknum").hide();	
		}else{
			$(data.elem).closest(".worktimeitem").find(".noworknum").hide();	
			$(data.elem).closest(".worktimeitem").find(".noworkmedia").hide();	
		}
	});
  form.on("switch(worktime)" , function(data){
		if(data.elem.checked){
			$('.worktime').show();
			$('.noworkdefault').show();
		}else{
			$('.worktime').hide();	
			$('.noworkdefault').hide();
		}
	});
  form.on("select(routernowork)" , function(data){
		if(data.value == 'trans'){
			$(data.elem).closest(".noworkdefault").find(".noworkdefaultnum").show();	
			$(data.elem).closest(".noworkdefault").find(".noworkdefaultmedia").hide();
		}else if(data.value == 'voice'){
			$(data.elem).closest(".noworkdefault").find(".noworkdefaultmedia").show();	
			$(data.elem).closest(".noworkdefault").find(".noworkdefaultnum").hide();	
		}else{
			$(data.elem).closest(".noworkdefault").find(".noworkdefaultnum").hide();	
			$(data.elem).closest(".noworkdefault").find(".noworkdefaultmedia").hide();	
		}
	});
  $("#worktimeadd").click(function(){
	  $("#worktimeitem").append($("#tpl").text());
		form.render();
  });
  form.on("switch(enablecalltrans)" , function(data){
		if(data.elem.checked){
			$('.enablecalltrans').show();
		}else{
			$('.enablecalltrans').hide();	
		}
	});
});
function removeItem(obj){
	$(obj).closest(".worktimeitem").remove();
}
</script>
<script id="tpl" type="text/html">
<#include "/admin/callcenter/router/worktimeitem.html" />
</script>